<template>
  <span>
    <el-input
      v-model="selectVal"
      :placeholder="placeholder"
      @focus="product.visible = true"
      readonly>
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="product.visible = true"
      ></el-button>
    </el-input>
    <SelectProductDialog
      :type="type"
      :title="title"
      :dialogVisible.sync="product.visible"
      @handle-select="handleSelect" />
  </span>
</template>
<script>
import SelectProductDialog from '@/pages/supplier/components/SelectProductDialog'

export default {
  name: 'ProductSelect', // 商品选择
  components: { SelectProductDialog },
  props: {
    // 弹框标题
    title: { type: String, default: '选择商品' },
    // 类型
    type: { type: String, default: 'temp' },
    placeholder: String,
  },
  data () {
    return {
      selectVal: '',
      // 商品
      product: {
        visible: false,
      },
    };
  },
  methods: {
    handleSelect (row) {
      this.$emit('input', row.productUuid);
      this.$emit('change', row.productUuid);
      this.selectVal = row.productName
    },
    resetSelectVal () {
      this.selectVal = ''
    }
  }
};
</script>
